<template>
  <div class="divBox">
    <el-button @click="onSearch">添加位置</el-button>
    <el-table
      v-loading="listLoading"

      size="small"
      :data="tableData.data"
      :header-cell-style=" {fontWeight:'bold'}">
      <el-table-column
        prop="id"
        label="ID"
        min-width="50"
      />
      <el-table-column
        prop="address"
        label="详细地址"
        min-width="200"
        align="center"
      />
      <el-table-column
        prop="latitude"
        label="纬度"
        min-width="70"
        align="center"
      />
      <el-table-column
        prop="longitude"
        label="经度"
        min-width="70"
        align="center"
      />
      <el-table-column label="操作" min-width="150" fixed="right" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" class="mr10"  @click="deleteLocationClick(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        :page-sizes="[20, 40, 60, 80]"
        :page-size="tableFrom.limit"
        :current-page="tableFrom.page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.total"
        @current-change="pageChange"

      />
    </div>
    <el-dialog v-model="modalMap" title='选择地点' :visible.sync="modalMap" append-to-body class="mapBox" width="500px">
      <iframe
        id="mapPage" width="100%" height="100%" frameborder=0
        v-bind:src="keyUrl"
      ></iframe>
    </el-dialog>
  </div>

</template>

<script>
import { configInfo } from '@/api/systemConfig'
import { addLocationApi, locationListApi, deleteLocationApi, deleteActivityApi } from '@/api/activity'
export default {
  name: 'activityLocation',
  props: {
    activityId: {
      type: Number
    },
  },
  data(){
    return{
      modalMap: false,
      keyUrl: '',
      ruleForm: {
        name: '',
        introduction: '',
        phone: '',
        address: '',
        detailedAddress: '',
        dayTime: '',
        image:'',
        latitude: ''
      },
      tableData:{
        data:[],
        total:0
      },
      listLoading: false,
      tableFrom: {
        page: 1,
        limit: 20,
        activityId:0
      },
    }
  },
  created(){
    console.info("活动id"+this.activityId)
    this.tableFrom.activityId=this.activityId
    this.getKey();
    this.getLocation()
  },
  mounted(){
    window.addEventListener('message', function (event) {
      // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
      var loc = event.data;
      if (loc && loc.module === 'locationPicker') { // 防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
        window.parent.selectAddress(loc);
      }
    }, false);
    window.selectAddress = this.selectAddress;
    this.getLocation()
  },
  methods:{
    //查找位置
    onSearch () {
      this.modalMap = true;
    },
    pageChange(page) {
      this.tableFrom.page = page
      this.getLocation()
    },
    deleteLocationClick(row){
      this.$modalSure(`删除 id 为 ${row.id} 的定位`).then(() => {
        this.listLoading = true
        deleteLocationApi({ id:row.id}).then(res => {
          console.info(res)
          this.listLoading = false
          this.getLocation()
        }).catch(res => {
          this.listLoading = false
          this.$message.error(res.message)
        })
      })
    },
    getLocation(){
      this.listLoading = true
      locationListApi(this.tableFrom).then(res=>{
        this.tableData.data = res.list
        this.tableData.total = res.total
        this.listLoading = false
      }).catch(res=>{
        this.listLoading = false
        console.info(res)
        this.$message.error(res.message)
      })
    },
    // 选择经纬度
    selectAddress (data) {
      this.ruleForm.latitude = data.latlng.lat + ',' + data.latlng.lng;
      console.info(data)
      this.modalMap = false;
      var location={}

      location.address=data.poiname+"-"+data.poiaddress
      location.latitude=data.latlng.lat
      location.longitude=data.latlng.lng
      location.activityId=this.activityId
      addLocationApi(location).then(res=>{
        console.info(res)
        this.getLocation()
      }).catch(res=>{
        console.info(res)
        this.$message.error(res.message)
      })
    },
    // key值
    getKey () {
      const _pram = { id: 74 };
      configInfo(_pram).then(async res => {
        let keys = res.tengxun_map_key;
        this.keyUrl = `https://apis.map.qq.com/tools/locpicker?type=1&key=${keys}&referer=myapp`;
      })
    },
  }
}
</script>
<style lang="scss">
.el-input-group__append, .el-input-group__prepend{
  background-color:#1890ff!important;
  color: #fff!important;
  border-color:#1890ff!important;
  border-radius: 0 4px 4px 0;
}
.cascaderW{
  width: 350px;
}
.mapBox .el-dialog__body{
  height: 640px !important;
}
</style>
